<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useCartStore } from '../../../../stores/cart';
import { showToast } from 'vant';
import { useRouter,useRoute } from 'vue-router';


const cartStore = useCartStore()
cartStore.getGoodsList()
const router = useRouter()
const route =useRoute()


const add = (id) => {
    cartStore.changeCount(id)
    showToast('添加成功')
}
const goDetail = (item) => {
    router.push({
        path:`/detail/${item.id}`,
        query:{
            img:item.img,
            name:item.name,
            price:item.price
        }
    })
    // console.log(route)
}

</script>

<template>
    <van-grid :border="false" :column-num="3">
        <van-grid-item v-for="item in cartStore.goodsList" :key="item.id">
            <van-image :src="item.img" @click="goDetail(item)"/>
            <h2>{{ item.name }}</h2>
            <p>￥{{ item.price }}</p>
            <van-button icon="plus" type="primary" size="small" @click="add(item.id)"/>
        </van-grid-item>
    </van-grid>
</template>

<style lang="scss" scoped>
// 样式穿透：使用 scoped 的组件修改UI组件内部的样式
::v-deep .van-grid-item__content{
    padding: 0;
}
</style>